<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-25 08:44:44
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-07-10 08:56:26
 * @Description  : 
-->
<template>
	<view class="page">
		<uv-navbar
			bgColor="transparent"
			:fixed="true"
			titleStyle="color:#000"
			:placeholder="true"
			@leftClick="$onClickLeft"
			leftIconColor="#000"
			title="评价"></uv-navbar>
		<view class="bannerArea">
			<view class="innerBannerArea">
				<view class="innerBannerArea_title">您对商家/菜品满意吗？</view>
				<view class="shopInfo">
					<image :src="currentSelect.image" style="width: 80rpx; height: 80rpx"></image>
					<view class="shopName">{{ currentSelect.shopName }}</view>
				</view>
				<view class="flex align-center commentItem firstCommentItem">
					<view class="commonLabel_l">总体</view>
					<uv-rate
						:readonly="isDetail"
						activeIcon="star-fill"
						inactiveIcon="star-fill"
						:value="formData.overallStar"
						inactiveColor="#c8c9cc"
						:active-color="themeColor"
						@change="changeRate"
						gutter="10"
						size="28"
						:count="count"
						v-model="formData.overallStar"></uv-rate>
					<view class="commonLabel_r">
						{{ mapInfo.find(item => item.value == formData.overallStar)?.name }}
					</view>
				</view>
				<view class="flex align-center commentItem">
					<view class="commonLabel_l">口味</view>
					<uv-rate
						:readonly="isDetail"
						activeIcon="star-fill"
						inactiveIcon="star-fill"
						:value="formData.tasteStar"
						inactiveColor="#c8c9cc"
						:active-color="themeColor"
						gutter="14"
						size="24"
						:count="count"
						v-model="formData.tasteStar"></uv-rate>
					<view class="commonLabel_r">
						{{ mapInfo.find(item => item.value == formData.tasteStar)?.name }}
					</view>
				</view>
				<view class="flex align-center commentItem">
					<view class="commonLabel_l">包装</view>
					<uv-rate
						:readonly="isDetail"
						activeIcon="star-fill"
						inactiveIcon="star-fill"
						:value="formData.packStar"
						inactiveColor="#c8c9cc"
						:active-color="themeColor"
						gutter="14"
						size="24"
						:count="count"
						v-model="formData.packStar"></uv-rate>
					<view class="commonLabel_r">
						{{ mapInfo.find(item => item.value == formData.packStar)?.name }}
					</view>
				</view>
				<view class="commentInputBox">
					<view class="commentInputBoxInner">
						<uv-textarea
							v-model="formData.comment"
							placeholder="请输入您的评价内容"
							border="none"
							:maxlength="200"
							:disabled="isDetail"
							:rows="5"
							:show-word-limit="true"
							:placeholder-style="{ color: '#999' }"></uv-textarea>
						<view class="uploadBox">
							<upload-file :deletable="!isDetail" v-model="formData.images" :disabled="isDetail" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<button class="confirmClass" v-if="!isDetail" @click="sendMsg">提交评价</button>
	</view>
</template>

<script setup>
	import { comment,commentDetail } from '@/api/goods'
	import { ref, onMounted } from 'vue'
	import { userGetUserInfo } from '@/api/user'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { useMainStore } from '@/store/store'
	import { storeToRefs } from 'pinia'
	const main = useMainStore()
	const { themeColor } = storeToRefs(main)
	const currentSelect = ref({})
	const count = ref(5)
	const mapInfo = ref([
		{ name: '非常满意', value: 5 },
		{ name: '满意', value: 4 },
		{ name: '一般', value: 3 },
		{ name: '差', value: 2 },
		{ name: '非常差', value: 1 }
	])
	const isDetail = ref(false)
	const formData = ref({
		images:[],
		comment:'',
		overallStar:null,
		tasteStar:null,
		packStar:null,
		pics:'',
	})
	const changeRate = (e)=>{
		if (!formData.value.tasteStar) {
			formData.value.tasteStar = e 
		}
		if (!formData.value.packStar) {
			formData.value.packStar = e 
		}
	}
	const sendMsg = async ()=>{
		if (!formData.value.overallStar) {
			return uni.showToast({
				title: '请至少选择一个总体评分',
				icon: 'none'
			})
		}
		console.log(formData.value)
		console.log(currentSelect.value)
		const res = await comment({
			oid:currentSelect.value.id,
			...formData.value,
			pics: formData.value.images?.join(',') || ''
		})
		console.log(res);
		if (res) {
			uni.showToast({
				title: '评价成功',
				icon: 'success'
			})
			uni.$emit('reloadCurrentListForOrder'); // 发送事件
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		}

	}
	onLoad(async (options) => {
		currentSelect.value = options
		console.log('options', options);
		isDetail.value = options.disabled == 'true' ? true : false
		if (isDetail.value) {
			const res = await commentDetail({
				oid:currentSelect.value.id,
			})
			let formDataCopy = res
			let picsCopy = formDataCopy.pictures || ''
			console.log(picsCopy);
			console.log(picsCopy);
			console.log(picsCopy);
			formDataCopy.images = picsCopy ? picsCopy.split(','): []
			formData.value = formDataCopy
		}
	})
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background-color: #f5f5f7;
	}
	.bannerArea {
		width: 100%;
		padding: 20rpx;
		.innerBannerArea {
			padding: 20rpx;
			width: 100%;
			color: #000;
			border-radius: 20rpx;
			background-color: #fff;
			.innerBannerArea_title {
				font-size: 36rpx;
				font-weight: bold;
				color: #000;
				margin-bottom: 10rpx;
			}
			.shopInfo {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				image {
					border-radius: 10rpx;
				}
				.shopName {
					margin-left: 16rpx;
				}
			}
			.commentItem {
				margin-top: 30rpx;
				font-size: 26rpx;
				color: #333;
				.commonLabel_l {
					width: 60rpx;
					margin-right: 10rpx;
				}
				.commonLabel_r {
					margin-left: 10rpx;
				}
			}
			.firstCommentItem {
				font-weight: bold;
				font-size: 30rpx;
			}
			.commentInputBox {
				margin-top: 40rpx;
				background-color: #fafafa;
				border-radius: 10rpx;
				width: 100%;
				.commentInputBoxInner {
					width: 100%;
					height: 100%;
					:deep(.uv-textarea) {
						background-color: transparent;
					}
					.uploadBox {
						padding: 9px;
					}
				}
			}
		}
	}
	.confirmClass {
		width: 90%;
		margin: 0 auto;
		border-radius: 50rpx;
		background: linear-gradient(90deg, $qingzhen-btn-primary-color, #91c9b2) !important;
		color: #fff !important;
		font-size: 32rpx !important;
		font-weight: 500 !important;
		padding: 2rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(211, 236, 226, 0.6);
	}
</style>
